$radius:50;
$speed:.7s;

.frame{
    position: absolute;
    width: 400px;
    height: 400px;
    inset: 0;
    margin: auto;
    box-shadow: 1px 2px 10px rgba(0,0,0,0.3);
    border-radius: 2px;
    background: #2c2e2e;
    overflow: hidden;
}

.pacman{
    position: absolute;
    width: ($radius * 2) + px;
    height: ($radius * 2) + px;
    inset: 0;
    margin: auto;
    fill: none;
    stroke: #f4d146;
    stroke-width: $radius + px;
    stroke-linecap: butt;
    stroke-dasharray: ($radius) * 3.14;
    animation: mouth $speed ease-in-out infinite;
}

.eye{
    position: absolute;
    width: 12px;
    height: 12px;
    fill: #2c2e2e;
    top: 167px;
    left: 204px;
    animation: eye $speed ease-in-out infinite;
}

.dots{
    position: absolute;
    height: 14px;
    width: 240px;
    top: 193px;
    left: 180px;
    stroke: #f4d146;
    stroke-width: 14px;
    stroke-linecap: round;
    stroke-dasharray: 0px 50px;
    stroke-dashoffset: 14px;
    animation: points $speed linear infinite;
}

@keyframes mouth {
    0%,100%{
        stroke-dashoffset: 0;
        transform: rotate(0deg);
    }
    50%{
        stroke-dashoffset: ($radius * 3.14 / 4);
        transform: rotate(45deg);
    }
}

@keyframes eye {
    0%,100%{
        transform: translate(0,0);
    }
    50%{
        transform: translate(-6px,-3px);
    }
}

@keyframes points {
    from{
        stroke-dashoffset: 14;
    }
    to{
        stroke-dashoffset: 64;
    }
}